<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>团检收款详情</title>
  <link rel="stylesheet" type="text/css" href="../../../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../../../themes/icon.css">
  <script type="text/javascript" src="../../../../easyui/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../../../easyui/js/jquery.easyui.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      font-size: 14px;
      background-color: #eee;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #000;
      padding: 0;
      margin: 0;
    }
    .content{
      height: 100%;
      padding: 30px;

    }
    .content_title {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #000;
    }
    .content-left-right{
      display: flex;
      width: 100%;
      height: 100%;
      margin-top: 20px;
    }

    .content_left {
      width: 40%;
      background: #fff;
      border-radius: 10px;
      margin-right: 20px;
    }
    .content_left h3 {
      padding-top: 10px;
      padding-left: 10px;
    }
    .content_left .tuanjian_info {
      padding-left: 50px;
      margin-top: 20px;
    }
    .content_left .tuanjian_info p {
      margin-bottom: 10px;
    }
    .content_left .formBox {
      padding-left: 50px;
      margin-top: 20px;
    }
    .form-item {
      margin-bottom: 20px;
    }
    .content_right{
      width: 60%;
      background: #fff;
      border-radius: 10px;
      padding: 30px;
    }

    .btn {
      /* width: 80px;
       */
      padding: 0 30px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      background: rgba(64, 158, 255, 1);
      border-radius: 10px;
    }
    .submit{
      margin: 50px auto;
      width: 80px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid;
      cursor: pointer;
      background-color: rgba(64, 158, 255, 1);
      color: #ffffff;
    }

  </style>
</head>
<body>
  <div class="content">
    <h3 class="content_title">团检收款详情</h3>
    <div class="content-left-right">
      <div class="content_left">
        <h3>团检信息</h3>
        <div class="tuanjian_info">
          <!-- <p>预约单号: 561651651251212</p> -->
          <p>企业名称: 山西欣欣软件公司</p>
          <p>企业统一信用代码: 123566156145641516</p>
          <p>企业联系人: 张辉</p>
          <p>联系人电话: 13566668888</p>
          <p>体检日期: 2023.05.06-2023.05.10</p>
          <p>总体检人数: 200人</p>
          <p>实际体检人数: 200人</p>
          <p>团检结算方式: 固定套餐</p>
          <p>
            <div>费用合计:</div>
            <table border="1" style="border-collapse: collapse; margin-top: 20px;">
              <tr>
                  <th>费用名称</th>
                  <th>总金额(元)</th>
                  <th>员工自付总费用（元）</th>
                  <th>企业承担总费用（元）</th>
              </tr>
              <tr>
                  <td>金额</td>
                  <td>68700.0</td>
                  <td>68700.0</td>
                  <td>68700.0</td>
              </tr>

          </table>
          </p>
          <p>企业结算优惠比例: 90%</p>
          <p>企业实际支付金额: 27000.00元</p>
        </div>
        <div class="formBox">
          <form id="ff" method="post">
              <div class="form-item">
                  <label for="name">付款卡号:</label>
                  <input class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>%
              </div>
              <div class="form-item">
                  <label for="name">付款方:</label>
                  <input class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>元
              </div>
              <div class="form-item">
                <label for="name">付款银行:</label>
                <input class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>元
              </div>
              <div class="form-item">
                <label for="name">付款时间:</label>
                <input class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>元
              </div>
              <div class="form-item">
                <label for="name">付款凭证:</label>
                <input type="file" class=" easyui-validatebox" placeholder="输入内容" type="text" name="name" data-options="required:false" style="width: 270px;height: 30px;"/>
              </div>
              <div class="form-item" style="margin: 50px 0;text-align: center;">
                  <a href="#" class="btn">确认已收款</a>
              </div>
          </form>
      </div>
      </div>
      <div class="content_right">
        <h3>费用明细</h3>
        <div id="tt" class="easyui-tabs" style="width:900px;margin-top: 30px;">
          <div title="项目明细表" style="padding:20px;display:none;">
            <div style="text-align: right;margin-bottom: 10px;">
              <a href="#" class="btn">导出</a>
            </div>
              <table class="easyui-datagrid" style="width:800px;" data-options="ctrlSelect:true,pagination:true">
                  <thead>
                      <tr>
                          <th data-options="field:'a1',width:100,align:'center'">序号</th>
                          <th data-options="field:'a2',width:200,align:'center'">套餐加项</th>
                          <th data-options="field:'a3',width:200,align:'center'">价格(元)</th>
                          <th data-options="field:'a4',width:100,align:'center'">人数(人)</th>
                          <th data-options="field:'a5',width:200,align:'center'">合计(元)</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>体检套餐1</td>
                          <td>300.00</td>
                          <td>50人</td>
                          <td>150000</td>
                      </tr>
                      <tr>
                          <td>1</td>
                          <td>体检套餐1</td>
                          <td>300.00</td>
                          <td>50人</td>
                          <td>150000</td>
                      </tr>
                      <tr>
                          <td>1</td>
                          <td><div style="color: greenyellow;">单项1</div></td>
                          <td>300.00</td>
                          <td>50人</td>
                          <td>150000</td>
                      </tr>
                      <tr>
                          <td>1</td>
                          <td><div style="color: greenyellow;">单项1</div></td>
                          <td>300.00</td>
                          <td>50人</td>
                          <td>150000</td>
                      </tr>
                      <tr>
                        <td>合计</td>
                        <td></td>
                        <td></td>
                        <td>1500.00</td>
                        <td>150000</td>
                    </tr>
                  </tbody>
              </table>
          </div>
          <div title="人员明细表"  style="overflow:auto;padding:20px;display:none;">
            <div style="text-align: right;margin-bottom: 10px;">
              <a href="#" class="btn">导出</a>
            </div>
              <table class="easyui-datagrid" style="width:800px;" data-options="ctrlSelect:true,pagination:true">
                  <thead>
                      <tr>
                          <th data-options="field:'a1',width:50,align:'center'">序号</th>
                          <th data-options="field:'a2',width:100,align:'center'">姓名</th>
                          <th data-options="field:'a3',width:150,align:'center'">套餐名称</th>
                          <th data-options="field:'a4',width:200,align:'center'">加项</th>
                          <th data-options="field:'a5',width:100,align:'center'">价格(元)</th>
                          <th data-options="field:'a6',width:100,align:'center'">个人自付(元)</th>
                          <th data-options="field:'a7',width:100,align:'center'">企业支付(元)</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>张辉</td>
                          <td>体检套餐1</td>
                          <td><div style="color: greenyellow;">项目1;项目2</div></td>
                          <td>300.00</td>
                          <td>150.00</td>
                          <td>150.00</td>
                      </tr>
                      <tr>
                          <td>2</td>
                          <td>张辉</td>
                          <td><div style="color: greenyellow;">单项1</div></td>
                          <td>项目1;项目2</td>
                          <td>300.00</td>
                          <td>150.00</td>
                          <td>150.00</td>
                      </tr>
                      <tr>
                          <td>3</td>
                          <td>张辉</td>
                          <td>体检套餐1</td>
                          <td><div style="color: greenyellow;">单项1</div></td>
                          <td>300.00</td>
                          <td>150.00</td>
                          <td>150.00</td>
                      </tr>
                      <tr>
                          <td>4</td>
                          <td>张辉</td>
                          <td>体检套餐1</td>
                          <td>项目1;项目2</td>
                          <td>300.00</td>
                          <td>150.00</td>
                          <td>150.00</td>
                      </tr>
                      <tr>
                          <td>合计</td>
                          <td>200人</td>
                          <td></td>
                          <td></td>
                          <td>30000.00</td>
                          <td>1500.00</td>
                          <td>1500.00</td>
                      </tr>
                  </tbody>
              </table>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>
</html>
